<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="130px"
      v-loading="formLoading"
    >
      <el-form-item label="机器人编号" prop="robotCode">
        <el-input v-model="formData.robotCode" placeholder="请输入机器人编号" />
      </el-form-item>
      <el-form-item label="机器人名称" prop="robotName">
        <el-input v-model="formData.robotName" placeholder="请输入机器人名称" />
      </el-form-item>
      <el-form-item label="健康状态" prop="robotStatus">
        <el-radio-group v-model="formData.robotStatus">
          <el-radio value="0">异常</el-radio>
          <el-radio value="1">健康</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="机器人当前电量" prop="currentPower">
        <el-input
          v-model="formData.currentPower"
          placeholder="请输入机器人当前电量"
        />
      </el-form-item>

      <el-form-item label="充电次数" prop="chargingCount">
        <el-input
          v-model="formData.chargingCount"
          placeholder="请输入充电次数"
        />
      </el-form-item>
      <el-form-item label="地点" prop="address">
        <el-input v-model="formData.address" placeholder="请输入地点" />
      </el-form-item>
      <el-form-item label="省" prop="province">
        <el-input v-model="formData.province" placeholder="请输入省" />
      </el-form-item>
      <el-form-item label="市" prop="city">
        <el-input v-model="formData.city" placeholder="请输入市" />
      </el-form-item>
      <el-form-item label="区" prop="district">
        <el-input v-model="formData.district" placeholder="请输入区" />
      </el-form-item>

      <el-form-item label="检测时间" prop="heathTime">
        <el-date-picker
          v-model="formData.heathTime"
          type="date"
          value-format="x"
          placeholder="选择检测时间"
        />
      </el-form-item>
      <el-form-item label="上传时间" prop="uploadTime">
        <el-date-picker
          v-model="formData.uploadTime"
          type="date"
          value-format="x"
          placeholder="选择上传时间"
        />
      </el-form-item>
      <el-form-item label="档案编号" prop="heathCode">
        <el-input v-model="formData.heathCode" placeholder="请输入档案编号" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading"
        >确 定</el-button
      >
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { RobotMonitorApi, RobotMonitorVO } from "@/api/health/robotmonitor";

/** 机器人健康档案 表单 */
defineOptions({ name: "RobotMonitorForm" });

const { t } = useI18n(); // 国际化
const message = useMessage(); // 消息弹窗

const dialogVisible = ref(false); // 弹窗的是否展示
const dialogTitle = ref(""); // 弹窗的标题
const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref(""); // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  robotId: undefined,
  robotCode: undefined,
  robotName: undefined,
  robotStatus: undefined,
  currentPower: undefined,
  mainBoard: undefined,
  mac: undefined,
  chargingCount: undefined,
  address: undefined,
  province: undefined,
  city: undefined,
  district: undefined,
  mainBoardCpu: undefined,
  mainBoardMemory: undefined,
  mainBoardStorageDevice: undefined,
  androidCpu: undefined,
  androidMemory: undefined,
  androidStorageDevice: undefined,
  androidStorageMac: undefined,
  microphone: undefined,
  antenna: undefined,
  radarStatus: undefined,
  moduleStatus: undefined,
  waveStatus: undefined,
  motorStatus: undefined,
  androidStatus: undefined,
  sensorTypeScale: undefined,
  powerInfo: undefined,
  heathTime: undefined,
  uploadTime: undefined,
  heathCode: undefined,
});
const formRules = reactive({
  heathTime: [{ required: true, message: "检测时间不能为空", trigger: "blur" }],
  uploadTime: [
    { required: true, message: "上传时间不能为空", trigger: "blur" },
  ],
});
const formRef = ref(); // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true;
  dialogTitle.value = t("action." + type);
  formType.value = type;
  resetForm();
  // 修改时，设置数据
  if (id) {
    formLoading.value = true;
    try {
      formData.value = await RobotMonitorApi.getRobotMonitor(id);
    } finally {
      formLoading.value = false;
    }
  }
};
defineExpose({ open }); // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(["success"]); // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate();
  // 提交请求
  formLoading.value = true;
  try {
    const data = formData.value as unknown as RobotMonitorVO;
    if (formType.value === "create") {
      await RobotMonitorApi.createRobotMonitor(data);
      message.success(t("common.createSuccess"));
    } else {
      await RobotMonitorApi.updateRobotMonitor(data);
      message.success(t("common.updateSuccess"));
    }
    dialogVisible.value = false;
    // 发送操作成功的事件
    emit("success");
  } finally {
    formLoading.value = false;
  }
};

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    robotId: undefined,
    robotCode: undefined,
    robotName: undefined,
    robotStatus: undefined,
    currentPower: undefined,
    mainBoard: undefined,
    mac: undefined,
    chargingCount: undefined,
    address: undefined,
    province: undefined,
    city: undefined,
    district: undefined,
    mainBoardCpu: undefined,
    mainBoardMemory: undefined,
    mainBoardStorageDevice: undefined,
    androidCpu: undefined,
    androidMemory: undefined,
    androidStorageDevice: undefined,
    androidStorageMac: undefined,
    microphone: undefined,
    antenna: undefined,
    radarStatus: undefined,
    moduleStatus: undefined,
    waveStatus: undefined,
    motorStatus: undefined,
    androidStatus: undefined,
    sensorTypeScale: undefined,
    powerInfo: undefined,
    heathTime: undefined,
    uploadTime: undefined,
    heathCode: undefined,
  };
  formRef.value?.resetFields();
};
</script>
